/**
 * Created by LiuLuKang on 2017/9/26.
 */
//var mycanvas=document.getElementById('mycanvas').getContext('2d');//拿到画笔
//mycanvas.beginPath();
//mycanvas.moveTo(15,0);
//mycanvas.lineTo(15,15);
//mycanvas.lineTo(341,15);
//mycanvas.lineTo(341,118);
//mycanvas.lineTo(0,118);
//mycanvas.lineTo(0,15);
//mycanvas.fillStyle="#FF2F1E";
//mycanvas.closePath();
//mycanvas.fill();

var photoBtn=document.getElementById('photoBtn');
var photoImg=document.getElementById('photoImg');
var word=document.getElementById('word');
var	introduceBtn=document.getElementById('introduceBtn');
var wordSanjiao=document.getElementById('wordSanjiao');
var photoBottom=document.getElementById('photoBottom');
var img1=document.getElementById('img1');
var img2=document.getElementById('img2');
var img3=document.getElementById('img3');
var img4=document.getElementById('img4');
var text=document.getElementById('text');
photoBtn.onclick=function(){
	photoBtn.style.transform='rotate(1080deg)';
	photoBtn.style.top="75px";
	photoBtn.style.opacity="0";
	introduceBtn.style.opacity='1';
	introduceBtn.style.zIndex='100';
	introduceBtn.style.top='75px';
	photoBottom.style.top='0';
	photoImg.style.transform='scale(0.144)';
	photoImg.style.borderRadius="100%";
	photoImg.style.top="-120px";
	photoImg.style.left="-140px";
	word.style.left='50px';
	wordSanjiao.style.bottom='-20px';
	wordSanjiao.style.left='-80px';
	wordSanjiao.style.transform='rotate(270deg)';
	img1.style.top='0';
	img2.style.top='0';
	img3.style.top='0';
	img4.style.top='0';
	text.style.top='100px';
};

introduceBtn.onclick=function(){
	introduceBtn.style.transform="rotate(-1080deg)";
	introduceBtn.style.top='35px';
	introduceBtn.style.opacity='0';
	photoBtn.style.top="35px";
	photoBtn.style.opacity="1";
	photoBottom.style.top='322px';
	word.style.left='0';
	wordSanjiao.style.bottom='96px';
	wordSanjiao.style.left='-30px';
	wordSanjiao.style.transform='rotate(0deg)';
	img1.style.top='100px';
	img2.style.top='100px';
	img3.style.top='100px';
	img4.style.top='100px';
	text.style.top='300px';
	photoImg.style.transform='scale(1)';
	photoImg.style.borderRadius="0";
	photoImg.style.top="0";
	photoImg.style.left="0";
	introduceBtn.style.zIndex='1';
};

var photoBtn1=document.getElementById('photoBtn1');
var photoImg1=document.getElementById('photoImg1');
var photoBottom1=document.getElementById('photoBottom1');
var word1=document.getElementById('word1');
var wordSanjiao1=document.getElementById('wordSanjiao1');
var introduceBtn1=document.getElementById('introduceBtn1');
var img11=document.getElementById('img11');
var img21=document.getElementById('img21');
var img31=document.getElementById('img31');
var img41=document.getElementById('img41');
var text1=document.getElementById('text1');
photoBtn1.onclick=function(){
	photoBtn1.style.transform='rotate(1080deg)';
	photoBtn1.style.top="75px";
	photoBtn1.style.opacity="0";
	introduceBtn1.style.opacity='1';
	introduceBtn1.style.zIndex='100';
	introduceBtn1.style.top='75px';
	photoBottom1.style.top='0';
	photoImg1.style.transform='scale(0.144)';
	photoImg1.style.borderRadius="100%";
	photoImg1.style.top="-120px";
	photoImg1.style.left="-140px";
	word1.style.left='50px';
	wordSanjiao1.style.bottom='-20px';
	wordSanjiao1.style.left='-80px';
	wordSanjiao1.style.transform='rotate(270deg)';
	img11.style.top='0';
	img21.style.top='0';
	img31.style.top='0';
	img41.style.top='0';
	text1.style.top='100px';
};
introduceBtn1.onclick=function(){
	introduceBtn1.style.transform="rotate(-1080deg)";
	introduceBtn1.style.top='35px';
	introduceBtn1.style.opacity='0';
	photoBtn1.style.top="35px";
	photoBtn1.style.opacity="1";
	photoBottom1.style.top='322px';
	word1.style.left='0';
	wordSanjiao1.style.bottom='96px';
	wordSanjiao1.style.left='-30px';
	wordSanjiao1.style.transform='rotate(-360deg)';
	img11.style.top='100px';
	img21.style.top='100px';
	img31.style.top='100px';
	img41.style.top='100px';
	text1.style.top='300px';
	photoImg1.style.transform='scale(1)';
	photoImg1.style.borderRadius="0";
	photoImg1.style.top="0";
	photoImg1.style.left="0";
	introduceBtn1.style.zIndex='1';
};
var photoBtn2=document.getElementById('photoBtn2');
var photoImg2=document.getElementById('photoImg2');
var photoBottom2=document.getElementById('photoBottom2');
var word2=document.getElementById('word2');
var wordSanjiao2=document.getElementById('wordSanjiao2');
var introduceBtn2=document.getElementById('introduceBtn2');
var img12=document.getElementById('img12');
var img22=document.getElementById('img22');
var img32=document.getElementById('img32');
var img42=document.getElementById('img42');
var text2=document.getElementById('text2');
photoBtn2.onclick=function(){
	photoBtn2.style.transform='rotate(1080deg)';
	photoBtn2.style.top="75px";
	photoBtn2.style.opacity="0";
	introduceBtn2.style.opacity='1';
	introduceBtn2.style.zIndex='100';
	introduceBtn2.style.top='75px';
	photoBottom2.style.top='0';
	photoImg2.style.transform='scale(0.144)';
	photoImg2.style.borderRadius="100%";
	photoImg2.style.top="-120px";
	photoImg2.style.left="-140px";
	word2.style.left='50px';
	wordSanjiao2.style.bottom='-20px';
	wordSanjiao2.style.left='-80px';
	wordSanjiao2.style.transform='rotate(270deg)';
	img12.style.top='0';
	img22.style.top='0';
	img32.style.top='0';
	img42.style.top='0';
	text2.style.top='100px';
};
introduceBtn2.onclick=function(){
	introduceBtn2.style.transform="rotate(-1080deg)";
	introduceBtn2.style.top='35px';
	introduceBtn2.style.opacity='0';
	photoBtn2.style.top="35px";
	photoBtn2.style.opacity="1";
	photoBottom2.style.top='322px';
	word2.style.left='0';
	wordSanjiao2.style.bottom='96px';
	wordSanjiao2.style.left='-30px';
	wordSanjiao2.style.transform='rotate(-360deg)';
	img12.style.top='100px';
	img22.style.top='100px';
	img32.style.top='100px';
	img42.style.top='100px';
	text2.style.top='300px';
	photoImg2.style.transform='scale(1)';
	photoImg2.style.borderRadius="0";
	photoImg2.style.top="0";
	photoImg2.style.left="0";
	introduceBtn2.style.zIndex='1';
};

var photoBtn3=document.getElementById('photoBtn3');
var photoImg3=document.getElementById('photoImg3');
var photoBottom3=document.getElementById('photoBottom3');
var word3=document.getElementById('word3');
var wordSanjiao3=document.getElementById('wordSanjiao3');
var introduceBtn3=document.getElementById('introduceBtn3');
var img13=document.getElementById('img13');
var img23=document.getElementById('img23');
var img33=document.getElementById('img33');
var img43=document.getElementById('img43');
var text3=document.getElementById('text3');
photoBtn3.onclick=function(){
	photoBtn3.style.transform='rotate(1080deg)';
	photoBtn3.style.top="75px";
	photoBtn3.style.opacity="0";
	introduceBtn3.style.opacity='1';
	introduceBtn3.style.zIndex='100';
	introduceBtn3.style.top='75px';
	photoBottom3.style.top='0';
	photoImg3.style.transform='scale(0.144)';
	photoImg3.style.borderRadius="100%";
	photoImg3.style.top="-120px";
	photoImg3.style.left="-140px";
	word3.style.left='50px';
	wordSanjiao3.style.bottom='-20px';
	wordSanjiao3.style.left='-80px';
	wordSanjiao3.style.transform='rotate(270deg)';
	img13.style.top='0';
	img23.style.top='0';
	img33.style.top='0';
	img43.style.top='0';
	text3.style.top='100px';
};
introduceBtn3.onclick=function(){
	introduceBtn3.style.transform="rotate(-1080deg)";
	introduceBtn3.style.top='35px';
	introduceBtn3.style.opacity='0';
	photoBtn3.style.top="35px";
	photoBtn3.style.opacity="1";
	photoBottom3.style.top='322px';
	word3.style.left='0';
	wordSanjiao3.style.bottom='96px';
	wordSanjiao3.style.left='-30px';
	wordSanjiao3.style.transform='rotate(-360deg)';
	img13.style.top='100px';
	img23.style.top='100px';
	img33.style.top='100px';
	img43.style.top='100px';
	text3.style.top='300px';
	photoImg3.style.transform='scale(1)';
	photoImg3.style.borderRadius="0";
	photoImg3.style.top="0";
	photoImg3.style.left="0";
	introduceBtn3.style.zIndex='1';
};

var photoBtn4=document.getElementById('photoBtn4');
var photoImg4=document.getElementById('photoImg4');
var photoBottom4=document.getElementById('photoBottom4');
var word4=document.getElementById('word4');
var wordSanjiao4=document.getElementById('wordSanjiao4');
var introduceBtn4=document.getElementById('introduceBtn4');
var img14=document.getElementById('img14');
var img24=document.getElementById('img24');
var img34=document.getElementById('img34');
var img44=document.getElementById('img44');
var text4=document.getElementById('text4');
photoBtn4.onclick=function(){
	photoBtn4.style.transform='rotate(1080deg)';
	photoBtn4.style.top="75px";
	photoBtn4.style.opacity="0";
	introduceBtn4.style.opacity='1';
	introduceBtn4.style.zIndex='100';
	introduceBtn4.style.top='75px';
	photoBottom4.style.top='0';
	photoImg4.style.transform='scale(0.144)';
	photoImg4.style.borderRadius="100%";
	photoImg4.style.top="-120px";
	photoImg4.style.left="-140px";
	word4.style.left='50px';
	wordSanjiao4.style.bottom='-20px';
	wordSanjiao4.style.left='-80px';
	wordSanjiao4.style.transform='rotate(270deg)';
	img14.style.top='0';
	img24.style.top='0';
	img34.style.top='0';
	img44.style.top='0';
	text4.style.top='100px';
};
introduceBtn4.onclick=function(){
	introduceBtn4.style.transform="rotate(-1080deg)";
	introduceBtn4.style.top='35px';
	introduceBtn4.style.opacity='0';
	photoBtn4.style.top="35px";
	photoBtn4.style.opacity="1";
	photoBottom4.style.top='322px';
	word4.style.left='0';
	wordSanjiao4.style.bottom='96px';
	wordSanjiao4.style.left='-30px';
	wordSanjiao4.style.transform='rotate(-360deg)';
	img14.style.top='100px';
	img24.style.top='100px';
	img34.style.top='100px';
	img44.style.top='100px';
	text4.style.top='300px';
	photoImg4.style.transform='scale(1)';
	photoImg4.style.borderRadius="0";
	photoImg4.style.top="0";
	photoImg4.style.left="0";
	introduceBtn4.style.zIndex='1';
};
var photoBtn5=document.getElementById('photoBtn5');
var photoImg5=document.getElementById('photoImg5');
var photoBottom5=document.getElementById('photoBottom5');
var word5=document.getElementById('word5');
var wordSanjiao5=document.getElementById('wordSanjiao5');
var introduceBtn5=document.getElementById('introduceBtn5');
var img15=document.getElementById('img15');
var img25=document.getElementById('img25');
var img35=document.getElementById('img35');
var img45=document.getElementById('img45');
var text5=document.getElementById('text5');
photoBtn5.onclick=function(){
	photoBtn5.style.transform='rotate(1080deg)';
	photoBtn5.style.top="75px";
	photoBtn5.style.opacity="0";
	introduceBtn5.style.opacity='1';
	introduceBtn5.style.zIndex='100';
	introduceBtn5.style.top='75px';
	photoBottom5.style.top='0';
	photoImg5.style.transform='scale(0.144)';
	photoImg5.style.borderRadius="100%";
	photoImg5.style.top="-120px";
	photoImg5.style.left="-140px";
	word5.style.left='50px';
	wordSanjiao5.style.bottom='-20px';
	wordSanjiao5.style.left='-80px';
	wordSanjiao5.style.transform='rotate(270deg)';
	img15.style.top='0';
	img25.style.top='0';
	img35.style.top='0';
	img45.style.top='0';
	text5.style.top='100px';
};
introduceBtn5.onclick=function(){
	introduceBtn5.style.transform="rotate(-1080deg)";
	introduceBtn5.style.top='35px';
	introduceBtn5.style.opacity='0';
	photoBtn5.style.top="35px";
	photoBtn5.style.opacity="1";
	photoBottom5.style.top='322px';
	word5.style.left='0';
	wordSanjiao5.style.bottom='96px';
	wordSanjiao5.style.left='-30px';
	wordSanjiao5.style.transform='rotate(-360deg)';
	img15.style.top='100px';
	img25.style.top='100px';
	img35.style.top='100px';
	img45.style.top='100px';
	text5.style.top='300px';
	photoImg5.style.transform='scale(1)';
	photoImg5.style.borderRadius="0";
	photoImg5.style.top="0";
	photoImg5.style.left="0";
	introduceBtn5.style.zIndex='1';
};